<template>
    <div class="info-content">
        <el-card class="info-card">
            <div class="avatar-section">
                <el-avatar :size="100" :src="userInfo.avatarUrl || defaultAvatar" />
                <el-upload class="avatar-uploader" action="/api/upload/avatar" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <el-button type="primary" size="small">更换头像</el-button>
                </el-upload>
            </div>
            <el-form label-width="80px" :model="localUserInfoForm" ref="userInfoFormRef">
                <el-form-item label="昵称">
                    <el-input v-model="localUserInfoForm.nickname" />
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="localUserInfoForm.username" disabled />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="localUserInfoForm.phone" disabled />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="localUserInfoForm.email" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="localUserInfoForm.gender">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                        <el-radio :label="0">保密</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="生日">
                    <el-date-picker v-model="localUserInfoForm.birthday" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="localUserInfoForm.description" type="textarea" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateProfile">保存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import type { User as UserType, UserInfoType } from '@/type/user'

const props = defineProps<{
    userInfo: UserType
    userInfoForm: any
    defaultAvatar: string
}>()

const emit = defineEmits<{
    (e: 'update-profile', userInfoData: UserInfoType): void
    (e: 'avatar-success', res: any): void
    (e: 'before-upload', file: any): void
}>()

// 表单引用
const userInfoFormRef = ref<FormInstance>()

// 本地用户信息表单
const localUserInfoForm = ref({ ...props.userInfoForm })

// 监听用户信息变化
watch(() => props.userInfoForm, (newVal) => {
    localUserInfoForm.value = { ...newVal }
}, { deep: true })

// 更新用户信息
const updateProfile = () => {
    const userInfoData: UserInfoType = {
        nickname: localUserInfoForm.value.nickname,
        username: localUserInfoForm.value.username,
        phone: localUserInfoForm.value.phone,
        email: localUserInfoForm.value.email,
        gender: localUserInfoForm.value.gender,
        birthday: localUserInfoForm.value.birthday,
        description: localUserInfoForm.value.description
    }
    emit('update-profile', userInfoData)
}

// 头像上传相关
const handleAvatarSuccess = (res: any) => {
    emit('avatar-success', res)
}

const beforeAvatarUpload = (file: any) => {
    emit('before-upload', file)
}
</script>

<style scoped>
.info-content {
    max-width: 600px;
    margin-left: 10px;
}

.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.avatar-uploader {
    margin-top: 10px;
}
</style>